<template>
  <v-dialog max-width="500" v-model="dialog">
    <template v-slot:activator="{ props: activatorProps }">
      <v-btn class="text-none" stacked v-bind="activatorProps">
        <v-icon icon="mdi-magnify"></v-icon>
      </v-btn>
    </template>

    <template v-slot:default="{ isActive }">
      <v-card>
        <v-text-field
          v-model="search"
          placeholder="搜索"
          prepend-inner-icon="mdi-magnify"
          variant="solo"
          hide-details
          single-line
          autofocus
          append-inner-icon="mdi-keyboard-esc"
          @click:append-inner="dialog = false"
        ></v-text-field>
        <div class="p-4">
          <v-card>
            <template v-slot:text>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
              ratione debitis quis est labore voluptatibus!
            </template>
          </v-card>
        </div>
      </v-card>
    </template>
  </v-dialog>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
const search = ref('');
const dialog = ref(false);

const handleKeyUp = (e: KeyboardEvent) => {
  if (e.ctrlKey && e.key === 'k') {
    console.log('Enter');
    dialog.value = true;
  }
};

onMounted(() => {
  window.addEventListener('keyup', handleKeyUp);
});

onUnmounted(() => {
  window.removeEventListener('keyup', handleKeyUp);
});
</script>

<style scoped></style>
